<template>
  <view class="safe-area-inset-bottom">
    <!-- 搜索框 -->
    <view class="swip_header">
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="queryParams.params.findApi"
              type="text" @confirm="handleQuery"
              @input="handleQuery"
              placeholder="请输入姓名或手机号码"/>
        </view>
      </view>
    </view>

    <view class="scroll_view">
      <view v-if="!!dataList && dataList.length > 0">
        <view class="table_view" @click="selectChange(item)" v-for="(item, index) in dataList" :key="index">
					<span style="width: 30%;">
						<i class="iconfont grayIcon" style="margin:0 10rpx 0 0;font-size: 30rpx;" v-if="item.isCertify == 0">&#xe625;</i>
						<i class="iconfont greenIcon" style="margin:0 10rpx 0 0;font-size: 27rpx;" v-else>&#xe625;</i>
						{{ item.name }}
					</span>
          <span>{{ item.mobile }}</span>
          <span>{{ item.staffPost }}</span>
          <span style="color: #00a660;">使用</span>
        </view>
        <!-- 加载更多 -->
        <uni-load-more color="#00a660" :status="loadStatus"/>
      </view>
      <!-- 暂无数据 -->
      <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
    </view>
  </view>
</template>

<script>
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {listCompanyPayStaffForEc} from "@/api/ec/console/busiConfig/companyPayStaff";

export default {
  name: "selectPayerStaff",
  components: {luanqingEmpty,},
  data() {
    return {
	  selectStaff:'',
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {
          findApi: undefined
        }
      },
    };
  },
  onLoad(option) {
  	if(option){
		this.selectStaff = JSON.parse(option.selectStaff);
		this.selectStaffId = selectStaff.id;
		this.handleQuery();
	}
  },
  created() {
    this.handleQuery();
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        this.loadMore(false);
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      listCompanyPayStaffForEc(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 选择使用联系人 */
    selectChange(item) {
      uni.$emit("signFlowFeePayInfo", item)
      uni.navigateBack({delta: 1})
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #FFFFFF;
}

.scroll_view {
  position: absolute;
  top: 110rpx;
  height: 80%;
  width: 100%;
  overflow-y: scroll;
}

.table_view {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #ebeef5;
  padding: 0 20rpx 0 0;
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
}
</style>
